<template>
    <div id="home">
        <el-container>

            <base-header :activeIndex="activeIndex"></base-header>

            <router-view class="me-container" />

            <base-footer v-show="footerShow"></base-footer>

        </el-container>

    </div>

</template>

<script>
    import BaseFooter from '@/components/BaseFooter'
    import BaseHeader from '@/views/BaseHeader'

    export default {
        name: 'Home',
        data() {
            return {
                activeIndex: '/',
                footerShow: true
            }
        },
        components: {
            'base-header': BaseHeader,
            'base-footer': BaseFooter
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.activeIndex = to.path
            })
        },
        beforeRouteUpdate(to, from, next) {
            if (to.path == '/') {
                this.footerShow = true
            } else {
                this.footerShow = false
            }
            this.activeIndex = to.path
            next()
        }
    }
</script>

<style>
    .me-container {
        margin: 100px auto 140px;
    }
</style>